<template>
    <div class="home">
        <!-- 头部 -->
        <div class="header">
            <div class="header-item">
                <span @click="login">登录</span>|
                <span>注册 &ensp;</span>
                <span> 我的订单 &ensp;</span>
                <span> 我的收藏</span>
            </div>
        </div>
        <div class="nav">
            <div class="nav-item">
                <img src="../assets/ss.png" alt="">

                <el-menu :default-active="activeIndex" mode="horizontal">
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">全部商品</el-menu-item>
                    <el-menu-item index="3">关于我们</el-menu-item>
                </el-menu>

                <el-input v-model="input3" placeholder="请输入搜索内容" class="input-with-select">
                    <template #append>
                        <el-button :icon="Search" />
                    </template>
                </el-input>
            </div>

        </div>
        <!-- 轮播图 -->
        <div class="a">
            <el-carousel>
                <el-carousel-item v-for="(item, index) in imgList" :key="index">
                    <img :src="`http://101.132.181.9/api/${item.imgPath}`" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 登录模态框 -->
        <el-dialog title="登录" v-model="dialogVisible" width="20%" style="text-align: center;">
            <el-form :model="form">
                <el-form-item>
                    <el-input v-model="form.userName" :prefix-icon="Avatar" autocomplete="off" placeholder="请输入账号">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.password" :prefix-icon="Unlock" type="password" autocomplete="off"
                        placeholder="请输入密码" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="goLogin">登录</el-button>
            </span>
        </el-dialog>
        <!-- 手机 -->
        <div class="phone">
            <h3>手机</h3>
            <div class="left">
                <img src="../assets/xiaomi.png" alt="">
            </div>
            <div class="phone-it">
                <div class="right" v-for="(item, index) in phone" :key="index" style="background-color: #fff;">
                    <img :src="'http://101.132.181.9/api/' + item.product_picture" alt="">
                    <p>{{ item.product_name }}</p>
                    <p>{{ item.product_title }}</p>
                    <span style="color: #ff9277;">{{ item.product_selling_price }}元&ensp;</span>
                    <span style="text-decoration:line-through;color: #b0b0b0;">{{ item.product_price }}元</span>
                </div>
                <div class="right" style="background-color: #fff; line-height: 280px;">
                    浏览更多 >>
                </div>
            </div>

        </div>
        <!-- 家电 -->
        <div class="phone">
            <h3>家电</h3>
            <div class="left">
                <img src="../assets/jingshui.png" alt="" style="width:234px;height: 300px;margin-bottom: 10px;">
                <img src="../assets/jiqi.png" alt="" style="width:234px;height: 300px;">
            </div>
            <div class="phone-it">
                <div class="right" v-for="(item, index) in electrical" :key="index" style="background-color: #fff;">
                    <img :src="'http://101.132.181.9/api/' + item.product_picture" alt="">
                    <p>{{ item.product_name }}</p>
                    <p>{{ item.product_title }}</p>
                    <span style="color: #ff9277;">{{ item.product_selling_price }}元&ensp;</span>
                    <span style="text-decoration:line-through;color: #b0b0b0;">{{ item.product_price }}元</span>
                </div>
                <div class="right" style="background-color: #fff; line-height: 280px;">
                    浏览更多 >>
                </div>
            </div>

        </div>
        <!-- 配件 -->
        <div class="phone">
            <h3>配件</h3>
            <div class="left">
                <img src="../assets/erji.png" alt="" style="width:234px;height: 300px;margin-bottom: 10px;">
                <img src="../assets/xishou.png" alt="" style="width:234px;height: 300px;">
            </div>
            <div class="phone-it">
                <div class="right" v-for="(item, index) in parts" :key="index" style="background-color: #fff;">
                    <img :src="'http://101.132.181.9/api/' + item.product_picture" alt="">
                    <p>{{ item.product_name }}</p>
                    <p>{{ item.product_title }}</p>
                    <span style="color: #ff9277;">{{ item.product_selling_price }}元&ensp;</span>
                    <span style="text-decoration:line-through;color: #b0b0b0;">{{ item.product_price }}元</span>
                </div>
                <div class="right" style="background-color: #fff; line-height: 280px;">
                    浏览更多 >>
                </div>
            </div>
        </div>
        <div class="botton">
            <img src="../assets/dibu.png" alt="">
        </div>
    </div>
</template>
  
<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ref, reactive, toRefs } from "vue";
import { carousel, getLogin, phone, electrical, parts } from "@/http/api.js";
import { ElNotification } from "element-plus";
export default {
    name: "home",

    setup() {
        // 引入路由
        const router = useRouter();
        // 引入仓库
        const store = useStore();
        const data = reactive({
            imgList: [], //轮播图
            dialogVisible: false,
            form: {
                userName: "",
                password: ""
            },
            categoryName: "手机",
            phone: [],
            electrical: [],
            parts: [],
            arr: ["首页", "全部商品", "关于我们"],
            activeIndex: '1'
        });
        //轮播图
        let getImg = () => {
            carousel().then(res => {
                // console.log(res);
                data.imgList = res.carousel;
            });
        };
        getImg();
        const login = () => {
            data.dialogVisible = true;
        };
        //登录接口
        const goLogin = () => {
            getLogin(data.form).then(res => {
                // console.log(res);
                if (res.code == "001") {
                    ElNotification({
                        title: "成功",
                        message: res.msg,
                        type: "success"
                    });
                    data.dialogVisible = false;
                }
            });
        };
        const getPhone = () => {
            phone({ categoryName: data.categoryName }).then(res => {
                // console.log(res);
                data.phone = res.Product;
            });
        };
        const getElectrical = () => {
            let categoryName = ["电视机", "空调", "洗衣机"];
            electrical({ categoryName: categoryName }).then(res => {
                // console.log(res);
                data.electrical = res.Product;
            });
        };
        const getParts = () => {
            let categoryName = ["保护套", "保护膜", "充电器", "充电宝"];
            parts({ categoryName: categoryName }).then(res => {
                console.log(res);
                data.parts = res.Product;
            });
        };
        getElectrical();
        getPhone();
        getParts();
        return {
            ...toRefs(data),
            getImg,
            login,
            goLogin,
            getPhone
        };
    }
};
</script>
  
<style lang="scss" scoped>
.home {
    background-color: #f5f5f5;

    .header {
        height: 40px;
        display: flex;
        justify-content: right;
        background-color: #3d3d3d;
        color: #8b9ba4;
        align-items: center;
        padding: 0 100px;
    }

    .a {
        width: 100%;
        background-color: #fff;
        padding: 5px 0;
    }

    .el-carousel {
        width: 80%;
        height: 460px;
        margin: 0 auto;

        .el-carousel__item {
            width: 100%;
            height: 460px;
            display: block;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .phone {
        width: 80%;
        height: 615px;
        margin: 50px auto;

        .phone-it {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: center;
        }

        .left {
            width: 234px;
            height: 614px;
            float: left;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .right {
            width: 234px;
            height: 300px;
            text-align: center;
            margin: 5px 0;
            line-height: 30px;

            img {
                width: 160px;
                height: 160px;
            }
        }
    }

    .botton {
        width: 100%;
        height: 400px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .nav {
        width: 100%;
        background-color: #fff;

        .nav-item {
            display: flex;
            width: 80%;
            height: 70px;
            margin: 0 auto;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
            align-items: center;

            ul {
                display: flex;
                list-style: none;
                height: 100%;
                align-items: center;

                text-align: center li {
                    margin-right: 20px;
                    width: 33%;
                }
            }

            .input-with-select {
                width: 400px;
                height: 40px;
            }

            img {
                height: 70px;
            }
        }
    }

    .active {
        color: #55a8ff;
        border-bottom: 1px solid #55a8ff;
    }
}
</style>